<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>任务管理平台</title>
<link rel="stylesheet" type="text/css"
	href="/sina_task/resources/css/ext-all.css" />
<script type="text/javascript" src="/sina_task/js/bootstrap.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		//任务模型
		Ext.define('Task', {
			extend : 'Ext.data.Model',
			fields : [ {
				name : 'task_desc',
				type : 'string'
			}, {
				name : 'task_type',
				type : 'int'
			}, {
				name : 'task_status',
				type : 'int'
			}, {
				name : 'ctime',
				type : 'date'
			} ]
		});

		//任务数据获取Store
		var myStore = Ext.create('Ext.data.Store', {
			model : 'Task',
			pageSize : 2,
			proxy : {
				type : 'ajax',
				url : 'index.php/Task/page_list',
				reader : {
					type : 'json',
					root : 'data',
					totalProperty : 'totalCount'
				}
			},
			autoLoad : true
		});

		//任务表单Panel
		var taskForm = new Ext.form.Panel({
			bodyPadding : 10,//表单元素与边的距离
			frame : true,
			defaults : {
				anchor : '100%'//输入框kuandu100%
			},
			items : [ {
				xtype : 'textfield',
				fieldLabel : '任务描述',
				name : 'task_desc',
				allowBlank : false
			}, {
				xtype : 'textfield',
				fieldLabel : '任务类型',
				name : 'task_type',
				allowBlank : false
			} ],
			buttons : [ {
				text : '重置',
				handler : function() {
					this.up('form').getForm().reset();
				}
			}, {
				text : '提交',
				formBind : true,
				disabled : true,
				handler : function() {
					var form = this.up('form').getForm();
					if (form.isValid()) {
						form.submit({
							url : 'index.php/Task/add?' + form.getValues(true),
							success : function(form, action) {
								Ext.Msg.alert('Success', action.result.msg);
							},
							failure : function(form, action) {
								Ext.Msg.alert('Failed', action.result.msg);
							}
						});
					}
				}
			} ]
		});

		//弹出面板
		var win = new Ext.window.Window({
			xtype : 'window',
			layout : 'fit',
			closeAction : 'hide',//关闭意味着隐藏
			resizable : false,
			shadow : true,
			modal : true,//蒙版
			closable : true,
			items : taskForm
		});

		//我的任务面板内容
		var my_task = {
			xtype : 'gridpanel',
			columns : [ {
				xtype : 'gridcolumn',
				dataIndex : 'task_type',
				text : '类别'
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'task_desc',
				text : '需求描述'
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'task_desc',
				text : '数据结果'
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'task_status',
				text : '状态'
			} ],
			store : myStore,
			dockedItems : [ {
				xtype : 'toolbar',
				dock : 'top',
				items : [ {
					text : '新建',
					handler : function() {
						taskForm.form.reset();
						taskForm.isAdd = true;
						win.setTitle('新增任务');
						win.show();
					}
				}, {
					text : '删除'
				} ]
			}, {
				xtype : 'pagingtoolbar',
				dock : 'bottom',
				store : myStore,
				displayInfo : true,
				beforePageText : '第',
				afterPageText : '页 共{0}页',
				displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
				emptyMsg : '没有记录'
			} ],
			viewConfig : {}
		};

		//全部任务面板内容
		var all_task = {
			xtype : 'gridpanel',
			region : 'center',
			columns : [ {
				xtype : 'gridcolumn',
				dataIndex : 'type',
				text : '类别'
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'desc',
				text : '需求描述'
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'result',
				text : '数据结果'
			}, {
				xtype : 'gridcolumn',
				dataIndex : 'status',
				text : '状态1'
			} ]
		};

		//配置面板内容
		var config = {
			xtype : 'gridpanel',
			region : 'center',
			columns : [ {
				xtype : 'gridcolumn',
				dataIndex : 'type',
				text : '类别'
			} ]
		};

		//主布局
		Ext.create('Ext.container.Viewport', {
			layout : 'border',
			items : [ {
				region : 'north',//北部
				html : '_$ta这里放置logo_$tag',
				xtype : "panel",
				autoHeight : true,
				border : false,
				margins : '0 0 5 0'
			}, {
				region : 'west',//西部
				collapsible : true,
				title : '菜单',
				xtype : 'treepanel',
				width : 200,
				autoScroll : true,
				rootVisible : false,
				store : new Ext.create('Ext.data.TreeStore', {
					root : {
						expanded : true,
						text : "",
						user : "",
						status : "",
						children : [ {
							text : "我的任务",
							leaf : true
						}, {
							text : "全部任务",
							leaf : true
						}, {
							text : "设置",
							leaf : true
						} ]
					}
				}),
				listeners : {
					itemclick : function(dv, record, item, index, e) {
						var main_panel = Ext.getCmp('main_panel');
						main_panel.setTitle(record.data.text);
						main_panel.removeAll(main_panel.items);
						var panel_content = my_task;
						switch (record.data.text) {
						case '我的任务':
							panel_content = my_task;
							break;
						case '全部任务':
							panel_content = all_task;
							break;
						case '设置':
							panel_content = config;
							break;
						default:
							panel_content = my_task;
						}
						main_panel.add(panel_content);
					}
				}
			}, {
				id : 'main_panel',
				region : 'center',//中部
				xtype : 'panel',
				title : '我的任务',
				height : 381,
				items : [ my_task ]
			}, {
				region : 'south',//南部
				html : '这里放置版权信息',
				height : 50
			} ]
		});

	});
</script>
</head>
<body>
</body>
</html>